<template>
  <div class="book-shuJia">
    <ul class="ShuJia">
      <li v-for="(item,index) in title" :key="index" @click="fn(index)" :class="{active:componentId === arr[index]}">{{item}}</li>
    </ul>
    <keep-alive>
      <component :is="componentId" class="yeMi" :mess="dataA"></component>
    </keep-alive>
  </div>
</template>

<script>
import Default from '@/components/bookshelf/Default.vue' // *默认
import ToUpdate from '@/components/bookshelf/ToUpdate.vue' // *更新
import Progress from '@/components/bookshelf/Progress.vue' // * 进度
import Purchase from '@/components/bookshelf/Purchase.vue' // * 购买
import Classification from '@/components/bookshelf/Classification.vue' // *分类
// import instance from "../request/api"
import axios from 'axios';
export default {
  name: 'ShuJia',

  data() {
    return {
      componentId:"Default",
      title:["默认","更新","进度","购买","分类"],
      arr:["Default","ToUpdate","Progress","Purchase","Classification"],
      dataA:[]
    };
  },
  mounted() {},
  created(){
    this.fn_data();
  },
  methods: {
    fn(index){
      this.componentId = this.arr[index];
    },
    async fn_data(){
      let {data} = await axios.get('./shu.json')
      this.dataA = data.bookshelf;
      console.log(this.dataA);
    }
  },
  components:{
    Default,
    ToUpdate,
    Progress,
    Purchase,
    Classification
  }
};
</script>

<style lang="less" scoped>
.book-shuJia{
  width:100%;
  .ShuJia{
    height:.65rem;
    line-height:.65rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid #ccc;
    li{
      font-size:.16rem;
    }
    .active{
      color:#2785dd;
    }
  }
  .yeMi{
    padding:.1rem 0;
  }
}
</style>